$name: #{'.' + $namespace + '-popup'};

#{$name} {
  &>.l-popup {
    $gap: 48rpx;
    background: transparent;
    width: calc(100% - $gap * 2);
  }

  #{$name}__content {
    --button-border-color: var(--primary-stroke-color);
    --button-border-width: 2rpx;
    border-radius: 16rpx;
    padding: 32rpx;
    display: block;

    &>.#{$namespace}-button__shadow {
      --shadow-position: inset;
      --shadow-y: -12rpx;
      --shadow-color: var(--primary-stroke-color);
      opacity: .3;
    }

    &>.#{$namespace}-button__content {
      border-radius: inherit;
      padding: var(--button-border-width);
    }
  }

  &__header {
    position: relative;
    border-radius: inherit;

    &>#{$name}__title {
      font-size: 36rpx;
      line-height: 50rpx;
      font-weight: bold;
      text-align: center;
      padding-top: 16rpx;
    }

    &>#{$name}__close {
      position: absolute;
      top: 0;
      right: 0;

      &>image {
        width: calc(37 * 2rpx);
      }
    }
  }

  &__footer {
    display: flex;
    align-items: center;

    &>.#{$namespace}-button {
      margin-bottom: 16rpx;
      flex: auto;
      margin-right: 32rpx;
    }

    $gap: 100rpx;

    &>:first-child {
      margin-left: $gap;
    }

    &>:last-child {
      margin-right: $gap;
    }
  }
}

@each $item in (top, bottom) {
  $direction: map-get($map: (
      top: -1, bottom: 1),
    $key: $item
    );

  #{$name}--#{$item} {
    &>.l-popup {
      width: 100%;
    }

    #{$name}__content {
      border-#{$item}-left-radius: 0;
      border-#{$item}-right-radius: 0;

      &>.#{$namespace}-button__border {
        border-#{$item}-width: 0;
        margin-left: calc(var(--button-border-width) * -1);
        margin-right: calc(var(--button-border-width) * -1);
      }

      &>.#{$namespace}-button__shadow {
        --shadow-y: #{calc($direction * 12rpx)};
      }
    }
  }
}

@each $item in (left, right) {
  #{$name}--#{$item} {
    &>.l-popup {
      width: auto;
    }

    #{$name}__content {
      border-top-#{$item}-radius: 0;
      border-bottom-#{$item}-radius: 0;
      height: 100%;

      &>.#{$namespace}-button__border {
        border-#{$item}: 0;
      }

      &>.#{$namespace}-button__content {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
    }

    #{$name}__body {
      flex: auto;
    }
  }
}